<template>
	<view class="home">
		<image class="top-bg" src="../../static/img/top_bg.png"></image>
		<image class="index-bg" src="../../static/img/index_bottom_bg.png"></image>
		
		<view class="search" @click="searchClick()"></view>
		
		<swiper class="swiper-cover" :circular="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in banners" :key="index">
				<navigator class="swiper-item" hover-class="none" @click="bannersClick(item)">
					<image :src="item.bannerImg" mode="aspectFill"></image>
				</navigator>
			</swiper-item>
		</swiper>

		<view class="selected">
			<view class="selected-title">
				<!-- <image src="../../static/img/selected.png"></image> -->
				<text>热门推荐</text>
				<text class="selected-tip">本产品仅供娱乐</text>
			</view>
			<scroll-view class="scroll-box" scroll-x="true">
				<view class="selected-list">
					<navigator class="selected-item" :url="`/pages/start/start?id=${item.Id}&typeId=${item.typeId}`"
						v-for="(item,index) in list1" :key="item.Id">
						<image class="icon" :src="item.ImgUrl" ></image>
						<image v-if="index%3==0" class="bg" src="../../static/img/oval1.png"></image>
						<image v-else-if="index%3==1" class="bg" src="../../static/img/oval2.png"></image>
						<image v-else class="bg" src="../../static/img/oval3.png"></image>
						<view class="title">{{item.Title}}</view>

						<image v-if="index%3==0" class="text-bg" src="../../static/img/oval11.png"></image>
						<image v-else-if="index%3==1" class="text-bg" src="../../static/img/oval22.png"></image>
						<image v-else class="text-bg" src="../../static/img/oval33.png"></image>
						<text class="text-tip">立即测试</text>
					</navigator>
				</view>
			</scroll-view>
		</view>

		<view class="hot">
			<view class="hot-title">
				<!-- <image src="../../static/img/hot.png"></image> -->
				<!-- <text>大家都在玩</text> -->
			</view>
			<view class="hot-list">
				<navigator class="hot-item" :url="`/pages/start/start?id=${item.Id}&typeId=${item.typeId}`" v-for="(item,index) in list"
					:key="item.Id">
					<image class="icon" :src="item.ImgUrl"></image>
					<view class="content">
						<view class="title">{{item.Title}}</view>
						<view class="subtitle">{{item.Descrption}}</view>
					</view>
					<view class="goTest">立即测试</view>
					<image class="btn" src="../../static/img/ceshi.png"></image>
				</navigator>
			</view>
		</view>

		<uni-load-more class="loading" color="#ffffff" :status="loadStatus" :icon-size="18" 
		 :showIcon="true" :contentText="noLoadingText">
		</uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isMore: true, // 是否加载更多
				loadStatus: "more",
				info: {}, // 中间的
				list: [], // 大家都在玩列表
				list1: [], // 精选列表
				banners: [], //轮播
				goodsId: '', 
				noLoadingText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "加载完毕",
				},
				params: {
					c: 0,
					pidx: 0,
					appId: 'ttb2dfc4622de58bd4',
					// testFlag: 1 // 测试时放开 非测试时注释
				}, // 普通
				params1: {
					c: 0,
					pidx: 0,
					appId: 'ttb2dfc4622de58bd4',
					type: '1'
				}, // 精选
				avatarUrl: '',
				nickName: '',
			}
		},

		methods: {
			searchClick() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			bannersClick: function(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: '/pages/mbti/index?'
					});
				} else {
					uni.navigateTo({
						url: '/pages/start/start?id=' + item.relevancePath
					});
				}
			},
			async fetch() {
				this.loadStatus = "loading"
				await this.request({
					url: '/GetList.ashx', 
					data: this.params
				}).then(result => {
					this.list = this.list.concat(result)
					var aa = {
						"bannerImg": "../../static/img/mati.png",
						"relevancePath": "11",
						type: 1
					}
					this.banners = [aa]
					console.log('result.length==', result.length)
					if (result.length < 10) {
						console.log('111==', result.length)
						this.loadStatus = "noMore"
					} else {
						this.loadStatus = "more"
					}
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			async fetch1() {
				this.loadStatus = "loading"
				await this.request({
					url: '/GetList.ashx', 
					data: this.params1
				}).then(result => {
					this.list1 = this.list1.concat(result)
					console.log('精选', this.list1)
				}).finally(() => {
					if (this.loadStatus !== "noMore") {
						this.loadStatus = "more"
					}
					uni.stopPullDownRefresh()
				})
			}
		},
		onLoad(options) {
			console.log('---options-----', options);
			this.goodsId = options.goodsId
			this.fetch()
			this.fetch1()
		},
		onReady(options) {		
			if(this.goodsId) {
				uni.navigateTo({
					url: '/pages/start/start?id=' + this.goodsId
				});
			}
		},
		onPullDownRefresh() { // 下拉刷新
			this.list = []
			this.banners = []
			this.isMore = true
			this.loadStatus = "more"
			this.params.pidx = 0;
			console.log(' -----------', this.params);
			this.fetch()
		},
		onReachBottom() { // 上拉加载
			this.params.pidx = this.params.pidx + 10;
			this.fetch()
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		// background: linear-gradient(90deg, #fedc45, #fb7099);
		// background-color: #8740ff;
	}
	.search {
		width: 684rpx;
		height: 80rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-94841630919301226.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 160rpx;
		left: 33rpx;
	}
	.loading{
		width: 100%;
		height: 80rpx;
		z-index: 100;
		position: absolute;
	}
	.navbar {
		position: fixed;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		z-index: 5;
		top: 0;
		font-size: 34rpx;
		color: #FFFFFF;
	}

	.top-bg {
		position: fixed;
		top: 0;
		height: 302rpx;
		width: 750rpx;
	}

	.index-bg {
		position: fixed;
		z-index: 0;
		top: 302rpx;
		width: 750rpx;
		height: 100%;
	}

	.scroll-box {
		width: 100%;
		height: 302rpx;
	}

	.selected {
		padding: 0 22rpx 1rpx;

		&-title {
			display: flex;
			align-items: center;
			padding: 36rpx 0;
			font-size: 36rpx;
			line-height: 1;
			color: #333333;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 18rpx;
			}

			text {
				z-index: 2;
				color: #FFFFFF;
				font-weight: bold;
			}
		}

		&-tip {
			color: #999999;
			font-size: 20rpx;
			z-index: 2;
			margin-left: auto;
		}

		&-list {
			display: flex;
			width: 100%;
		}

		&-item {
			flex-shrink: 0;
			width: 212rpx;
			height: 300rpx;
			border-radius: 12rpx;
			// box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.20);
			overflow: hidden;
			margin-left: 34rpx;
			position: relative;

			&:first-child {
				margin-left: 0;
			}

			.icon {
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				margin: 0rpx 46rpx 0 46rpx;
				z-index: 11;
				border-radius: 10rpx;
			}

			.title {
				top: 140rpx;
				font-size: 28rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				color: #FFFFFF;
				position: absolute;
				left: 5%;
				width: 90%;
				text-align: center;
			}

			.bg {
				width: 100%;
				margin-top: 40rpx;
				height: 100%;
				display: block;
			}

			.text-bg {
				position: absolute;
				bottom: 20rpx;
				left: 15%;
				display: block;
				height: 54rpx !important;
				line-height: 54rpx;
				width: 70%;
				border-radius: 27rpx;
				height: 34rpx;
			}

			text {
				position: absolute;
				bottom: 20rpx;
				left: 15%;
				display: block;
				height: 54rpx !important;
				line-height: 54rpx;
				width: 70%;
				color: #FFFFFF;
				border-radius: 27rpx;
				font-size: 25rpx;
				height: 34rpx;
				text-align: center;
			}
		}
	}

	.hot {
		padding: 0 22rpx 1rpx;

		&-title {
			display: flex;
			align-items: center;
			padding: 36rpx 0;
			font-size: 36rpx;
			line-height: 1;
			color: #333333;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 18rpx;
			}

			text {
				color: #FFFFFF;
			}

		}

		&-item {
			display: flex;
			padding: 20rpx 22rpx 20rpx 22rpx;
			margin-left: 20rpx;
			height: 148rpx;
			width: 686rpx;
			// background: linear-gradient(90deg, #fb7099, #fedc45);
			border-radius: 10rpx;
			background-image: url(../../static/img/cardbg.png);
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			margin-top: 20rpx;
			position: relative;

			&:first-child {
				margin-top: 0;
			}

			.icon {
				width: 108rpx;
				height: 108rpx;
				flex-shrink: 0;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 24rpx;
				margin-left: -40rpx;
			}

			.content {
				flex: 1;
				color: #FFFFFF;

				.title {
					font-weight: bold;
					font-size: 32rpx;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 350rpx;
				}

				.subtitle {
					font-size: 24rpx;
					line-height: 34rpx;
					width: 350rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}

			.goTest {
				border-radius: 20rpx;
				height: 50rpx;
				position: absolute;
				bottom: 15rpx;
				right: 40rpx;
				color: white;
				font-size: 24rpx;
				padding: 8rpx 20rpx 5rpx 20rpx;
				z-index: 10;
				color: #86582a;
			}

			.btn {
				width: 140rpx;
				height: 48rpx;
				position: absolute;
				bottom: 15rpx;
				right: 40rpx;
				z-index: 9;
			}
		}
	}

	.swiper-cover {
		padding: 20rpx 0 4rpx;
		height: 420rpx;
		margin-top: 250rpx;

		.swiper-item {
			width: 100%;
			height: 100%;
			padding: 0 24rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
	}
</style>
